<template>
  <a-card v-if="loading == false" class="cardBox">
    <div slot="title" class="title">
      <!-- 申请类型 -->
      <div class="title_combination">
        <!-- 返回按钮 -->
        <a-button
          @click="handleBack"
          type="text"
          style="font-weight: 550; font-size: 1.1rem; border: none; margin: 0; padding: 0px 15px 3px 0px"
        >
          <a-icon type="arrow-left" />
          返回
        </a-button>
        <a-divider type="vertical" style="margin-left: 0" />
        <div class="title_center">
          <a-popover v-if="$route.params.processName" placement="topLeft">
            <template slot="content">
              <span>{{ $route.params.processName }}</span>
            </template>
            {{
              $route.params.processName.length > 15
                ? $route.params.processName.substring(0, 15) + '...'
                : $route.params.processName
            }}
          </a-popover>
        </div>
      </div>
      <!-- 任务详情 -->
      <div>
        <!-- <a-tag v-if="$route.params.taskName" color="#2db7f5">
            {{ $route.params.taskName }}
          </a-tag>
          <a-tag @click="copyClick($route.params.applyno)" v-if="$route.params.applyno">
            {{ $route.params.applyno }}
          </a-tag>
          <a-tag v-if="$route.params.acceptcode" @click="copyClick($route.params.acceptcode)">
            {{ $route.params.acceptcode }}
          </a-tag>
          <a-tag v-if="$route.params.proctype_text" color="#3cb371">
            {{ $route.params.proctype_text }}
          </a-tag> -->
        <!-- <a-tag v-if="processNext.currentgroup">
            当前环节：
            <a-tooltip placement="topLeft">
              <template slot="title">
                {{ processNext.groupname }}
              </template>
              <a-icon type="team" />
              {{ processNext.currentgroup }}
            </a-tooltip>
          </a-tag> -->
      </div>
    </div>

    <!-- tab 盒子 -->
    <a-tabs v-model="key" @change="tabChange" tab-position="left">
      <!-- 案件详情 -->
      <a-tab-pane key="1" forceRender>
        <span slot="tab">
          <!-- <a-icon type="container" /> -->
          案件详情
        </span>
        <div class="formBox">
          <TaskFormView
            v-if="key == '1'"
            ref="formView"
            @fGetEnclosure="sGetEnclosure"
            @f_SetFormData="s_SetFormData"
            @f_getStepBtnList="s_getStepBtnList"
            :pattern="Number($route.params.pattern)"
            :applyid="$route.params.faapplyid || $route.params.applyid"
          ></TaskFormView>
        </div>
      </a-tab-pane>

      <!-- 申请材料 -->
      <a-tab-pane key="2" forceRender>
        <span slot="tab"> 案件材料 </span>
        <!-- 申请表附件, 如果是子流程就显示父流程的附件 -->
        <preFile
          ref="preFile"
          :applyid="$route.params.faapplyid || $route.params.applyid"
          :taskid="$route.params.taskid"
          :category="$route.params.category"
          :isEdit="[3, 5].includes(Number($route.params.pattern))"
          :tabLists="Array('applicant')"
          :isShowTypical="false"
          @openReview="openReview"
          @onClose="closeReview"
        />
      </a-tab-pane>

      <!-- 申请材料 -->
      <a-tab-pane key="3" forceRender>
        <span slot="tab"> 办案程序 </span>
        <!-- 申请表附件, 如果是子流程就显示父流程的附件 -->
        <SuperviseTab
          ref="superviseTab"
          :applyid="$route.params.faapplyid || $route.params.applyid"
          :category="$route.params.category"
          :taskid="$route.params.taskid"
          :processinstanceid="$route.params.processinstanceid"
          :isEditModel="[3, 5].includes(Number($route.params.pattern))"
        >
        </SuperviseTab>
      </a-tab-pane>

      <!-- 复议文书 -->
      <a-tab-pane key="4" forceRender>
        <span slot="tab">
          <!-- <a-icon type="book" />  -->
          复议文书
        </span>
        <LogPaperwork v-if="key == '4'" :applyid="$route.params.faapplyid || $route.params.applyid" />
      </a-tab-pane>
      <!-- 办理记录 -->
      <a-tab-pane key="5" forceRender>
        <span slot="tab">
          <!-- <a-icon type="unordered-list" /> -->
          处理流程
        </span>
        <div class="timeLineArea">
          <WF_MYTASKUNDORECORD ref="Wf_MyTaskUndoRecordRef" :processinstanceid="$route.params.processinstanceid" />
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- 系统栏按钮隐藏 -->
    <FormOperation
      v-if="
        !hideBtnList.includes($route.params.category) &&
        [3, 5].includes(Number(this.$route.params.pattern)) &&
        processState == true
      "
      ref="btnRef"
      :style="{ zIndex: operation_zindex }"
      :formid="this.$route.params.formid"
      :processinstanceid="this.$route.params.processinstanceid"
      :processdefinitionid="this.$route.params.processdefinitionid"
      :taskid="this.$route.params.taskid"
      :stepid="this.$route.params.stepid"
      :owner="this.$route.params.owner"
      :taskName="this.$route.params.taskName"
      :pattern="Number(this.$route.params.pattern)"
      :category="$route.params.category"
      @saveForm="saveForm"
      @f_pointTab="s_pointTab"
    />
  </a-card>
</template>

<script>
import { getProcessVariable, getHandleParams } from '@/api/workflow/wf_ProcessInstance.js'
import { copyValue } from '@/utils/formassembly/util.js'
import { Tp_categoryValue, hideThirdCategoryList, caseCategoryList } from '@/enumeration/Tp_category.js'
import { Tp_proctypeEnum } from '@/enumeration/Tp_proctype.js'

const hideBtnList = ['assignment', 'evidence', 'decision', 'rectify']
export default {
  data () {
    return {
      hideBtnList: hideBtnList, // 需要隐藏操作按钮的环节
      Tp_categoryValue: Tp_categoryValue, // 分类标识
      caseCategoryList: caseCategoryList, // 显示办案程序的分类标识
      hideThirdCategoryList: hideThirdCategoryList, // 隐藏第三人的流程标识
      processState: null, // 流程状态
      processNext: this.$route.query, // 流程下一步的信息
      loading: true, // 页面参数是否初始化完成
      modelKey: this.$route.params.modelKey,
      applyid: null, // 申请表id
      variableMap: {}, // 流程变量Map, 用来配置表达式
      isEmpty: false, // 空状态
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      enclosureList: [], // 表单附件类型控件item
      key: '1', // 卡片切换key
      operation_zindex: 9,
      isBtn2Show: true, // 底部第二个按钮显示吗？默认会显示
      btn3Name: '', // 底部第三个按钮名称
      Tp_proctypeEnum: Tp_proctypeEnum
    }
  },
  async created () {
    // 根据taskid查询页面参数
    await getHandleParams(this.$route.params.taskid)
      .then(res => {
        console.log('页面所需参数', res)
        if (res.code == 0 && res.data != null) {
          for (const key in res.data) {
            this.$route.params[key] = res.data[key]
          }
          this.processState = res.data.state
        } else {
          this.$message.error('查询处理页面所需要的参数失败!')
        }
      })
      .finally(() => {
        this.loading = false
      })
    this.findProcessVariable()
    console.log('路由------', this.$route)
    console.log('路由参数------', this.$route.params)
  },
  methods: {
    // 子组件调用修改流程状态
    s_updateState (state) {
      // console.log('s_updateState', state)
      this.$route.params.state = true
      this.processState = state
    },
    // 鼠标点击复制内容
    copyClick (value) {
      if (copyValue(value)) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 查询流程变量, 用来配置表达式
    findProcessVariable () {
      getProcessVariable(this.$route.params.processinstanceid).then(res => {
        if (res.code == 0) {
          this.variableMap = res.data || {}
          // ^ 保存表单数据到Vuex
          this.$store.commit('setPrecessVariable', this.variableMap)
        }
      })
    },
    // 子组件调用, 切换显示的标签页
    s_pointTab (index) {
      this.key = index
      if (this.$refs.preFile) {
        this.$refs.preFile.onClose()
      }
    },
    // 找到按钮回显环节需要用到的id
    s_getStepBtnList (stepid) {
      console.log('管理员按钮', this.$route.params.pattern)
      this.$nextTick(() => {
        if (this.$refs.btnRef) {
          this.$refs.btnRef.getStepBtnList(stepid)
        }
      })
    },
    // 父表单组件调用, 给表单填写数据
    s_SetFormData (body) {
      this.$refs.btnRef.sSetFormData(body)
    },
    // 按钮组件_通过时保存表单数据
    saveForm () {
      // dom存在立马保存
      if (this.$refs.formView) {
        this.$refs.formView.saveForm(true)
      } else {
        // dom不存在切换回表单校验完再保存
        this.key = '1'
        setTimeout(() => {
          this.$refs.formView.saveForm(true)
        }, 1000)
      }
    },
    // 子组件找到的文件类型给值方法
    sGetEnclosure (list) {
      this.enclosureList = []
      list &&
        list.forEach(v => {
          const item = {}
          this.initItme(item, v)
          this.enclosureList.push(item)
        })
      // console.log('表单控件类型', this.enclosureList)
    },
    // 递归复制对象初始化
    initItme (item, v) {
      for (const key in v) {
        if (typeof v[key] === 'object') {
          const obj = {}
          item[key] = this.initItme(obj, v[key])
        } else {
          if (key == 'disabled') {
            item[key] = true
          }
          // 附件区域不允许添加
          else if (key == 'limit') {
            if (this.$route.params.taskid == 'undefined' || this.$route.params.taskid == undefined) {
              item[key] = 0
            }
          } else {
            item[key] = v[key]
          }
        }
      }
      return item
    },
    // tab切换事件
    async tabChange (key) {
      this.isEmpty = false
      console.log('选中', key)
      if (key == '5') {
        this.$refs.Wf_MyTaskUndoRecordRef.getProcessingRecord()
      }
    },
    // 返回按钮
    handleBack () {
      // console.log('返回', this.$route.query)
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey
            }
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam
            }
          })
        }
        // console.log('this.$route.query.queryParam',this.$route.query.queryParam);
      } else {
        this.$router.go(-1)
      }
    },
    openReview () {
      this.operation_zindex = 2000
    },
    closeReview () {
      this.operation_zindex = 9
    },
    // 查询当前的相似度数据
    getSimilarityModal () {
      this.$refs.similayModalRef.reloadModal()
    }
  },
  beforeDestroy () {
    // 任务组件处理销毁之前清除vuex缓存的表单数据, 防止下次审批时污染
    this.$store.state.Processform.formData = {}
  },
  // 依赖components
  components: {
    TaskFormView: () => import('@/views/workflow/Wf_TaskForm.vue'),
    FormOperation: () => import('@/views/workflow/Wf_FormOperation.vue'),
    WF_MYTASKUNDORECORD: () => import('@/views/workflow/Wf_MyTaskUndoRecord.vue'),
    PreFile: () => import('@/views/aprv/pre_trialFile.vue'),
    LogPaperwork: () => import('@/views/aprv/log_paperwork.vue'),
    SuperviseTab: () => import('@/views/supervise/SuperviseTab.vue')
  }
}
</script>

<style lang="less" scoped>
.title_generateBtn {
  position: absolute;
  width: 200px;
  right: 225px;
}

.title_backBtn {
  position: absolute;
  width: 100px;
  right: 0;
}

.title_backBtn_div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 40px;
}

.title_backBtn_material {
  display: block;
  font-size: 24px;
  margin-right: 20px;
  cursor: pointer;
}

.title_combination {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}

.title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

.title_prefix {
  margin-top: 0.2%;
  width: 4px;
  height: 17px;
  background-color: #5b79fb;
}

.title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.cardBox {
  position: relative;
}

.emptyBox {
  position: absolute;
  top: 35%;
  left: 45%;
}

.recordBox {
  display: flex;
  justify-content: center;
}

.formBox,
.recordBox {
  height: 65vh;
  overflow: auto;
  // border: 1px solid red;
}

.imgBox div {
  margin-top: 15px;
  margin-left: -50px;
  position: absolute;
  left: 0;
  top: 0;
}

.imgBox:active {
  opacity: 0.2;
}

.img {
  width: 70px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.imgBox {
  /* height: 300px; */
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
</style>
